.mask {
  font-size: 14px;
  // font-weight: 400;
  color: #131a28;
  line-height: 21px;
  .mask_cont {
    width: 327px;
    height: 587px;
    // height: calc(100vh - 120px - env(safe-area-inset-bottom));
    position: relative;
    background: url("../assets/mask_bg.png") no-repeat top 26px left 0;
    background-size: 327px 561px;
    text-align: center;
    .title {
      text-align: center;
      font-size: 16px;
      min-width: 223px;
      display: inline-block;
      height: 44px;
      line-height: 44px;
      color: #fff;
      padding-left: 20px;
      padding-right: 20px;
      margin-left: 8px;
      border-width: 1px;
      margin-bottom: 19px;
      // border-style: solid;
      border-image: url("../assets/mask_title.png")  0 100 0 100 fill / 1px 163px stretch;
    }
    .line_box {
      position: relative;
      background:  url("../assets/line.png") no-repeat top 11px left 52px ;
      background-size: 255px 2px;
      height: 18px;
      .cont_icon {
        width: 22px;
        height: 18px;
        position: absolute;
        top: 0;
        left: 20px;
       
      }
      &.line_box1 {
        background-position: left 20px top 11px;
        .cont_icon {
          left: 285px;
        }
      }

    }
    .inner_cont {
      height: 364px;
      text-align: left;
      overflow-y: auto;
      padding-left: 25px;
      padding-right: 20px;
      -webkit-overflow-scrolling: touch;
      // flex: 1;
      // height: auto;
      // 解决滚动条隐藏问题
      // padding-right: 30px;
      width: 100%;
      // max-height: calc(~"100% - 97px");

    }

    .opt {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;

      .opt_btn {
        width: 137px;
        height: 48px;
      }
    }
  }

  .pay_cont {
    width: 327px;
    height: 144px;
    margin-top: 11px;
    padding-top: 13px;
    position: relative;
    background: url("https://content.daylucky.cn/admin/image/sid0zx01jddv3n9fi5hcxp6v.png")
      no-repeat left top/ cover;

    .lock_title {
      font-size: 16px;
      padding-left: 20px;
      padding-right: 20px;
      font-family: WDCH-Regular, WDCH;
      // font-weight: 400;
      color: #ffcafd;
      line-height: 24px;
    }
    .unlock_desc {
      padding-left: 20px;
      padding-right: 20px;
      font-size: 14px;
      // font-weight: 400;
      color: #ffffff;
      line-height: 21px;
      &.lock_desc {
        background: linear-gradient( 180deg, #ffffff 0%,rgba(255, 255, 255, 0) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .play_videoAd_btn {
      width: 208px;
      height: 38px;
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
    }

    .unlock_title {
      width: 64px;
      height: 32px;
      margin-top: -4px;
      margin-left: 20px;
    }

    

    .unlock_next {
      width: 287px;
      height: 38px;
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
    }
  }

  .close {
    width: 32px;
    height: 32px;
    margin-top: 18px;
  }
}